@extends('layouts.back_stage')
@section('content')
    <style>
        .tableBg{padding:30px;background:#fff;}
        .shopBg{background:#fff;overflow: hidden;margin:20px 0 10px 0;}
        .pagination-box{text-align: center;box-sizing:border-box;margin-top:20px;}
        .input-item{width:200px;padding-right: 0;}
        ::-webkit-scrollbar {height: 8px;}
        .el-table__footer-wrapper tbody td, .el-table__header-wrapper tbody td{color:red;}
        .el-select .el-input .el-select__caret.el-input__icon{line-height:22px;}
        .el-table thead.is-group th{padding:0 !important;}
        [v-cloak] {display: none;}
    </style>
    <div class="container">
        <div style="padding:20px 20px 20px 0;overflow:hidden;"><h3 style="float:left;">订单执行情况</h3></div>
        <!-- 主体-->
        <div class="page-body">
            <div class="row app" id="shopInfos" v-cloak>
                <div class="col-md-12 row row-table-box">
                    <div class="shopBg">
                        <div class="row" style="margin-top:10px;padding:26px 30px;min-height:90px;background:#fff;">
                            <label>公司：</label>
                            <el-select v-model="company_id" filterable placeholder="请选择公司" size="small" style="width:200px;">
                                <el-option v-for="item in options1" :key="item.id" :label="item.company_name" :value="item.id"></el-option>
                            </el-select>

                            {{--<label>时间：</label>--}}
                            {{--<el-date-picker v-model="getDatas" @change="getTime" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size="small"></el-date-picker>--}}
                            <el-button type="primary" size="small" @click="grabble1('reset')">搜索</el-button>
                            <el-button type="primary" size="small" @click="resetSou('reset')">重置</el-button>
                        </div>
                    </div>
                    <div class="tableBg" style="margin-top:10px;">
                        <el-tabs v-model="activeName2" type="border-card">
                            <el-tab-pane label="执行情况" name="first">
                                <el-table :data="girardDetails" max-height="510" size="mini" style="width: 100%;" border :summary-method="getSummaries1" show-summary>
                                    <el-table-column prop="loop" label="序号" width="50" :resizable='false'></el-table-column>
                                    <el-table-column prop="client_name" label="客户" width="160" :resizable='false'></el-table-column>
                                    <el-table-column prop="girard" label="款号" width="100" :resizable='false'></el-table-column>
                                    <el-table-column prop="price" label="零售价/元" width="100" :resizable='false'></el-table-column>

                                    <el-table-column prop="user_rate" label="订货折扣" width="100" :resizable='false'></el-table-column>
                                    <el-table-column prop="discount_price" label="单价/元" width="100" :resizable='false'></el-table-column>

                                    <el-table-column prop="color" label="颜色" width="75" :resizable='false'></el-table-column>
                                    <el-table-column prop="size" label="尺码" width="50" :resizable='false'></el-table-column>
                                    <el-table-column prop="nums" label="订货数/件" width="120" :resizable='false'></el-table-column>
                                    <el-table-column prop="send_nums" label="已发出数/件" width="120" :resizable='false'></el-table-column>
                                    <el-table-column prop="kai_nums" label="已开单数/件" width="120" :resizable='false'></el-table-column>
                                    <el-table-column prop="old_send" label="已发出剩余/件" width="120" :resizable='false'></el-table-column>
                                    <el-table-column prop="old_kai" label="已开单剩余/件" width="120" :resizable='false'></el-table-column>
                                    <el-table-column prop="order_price" label="订货额/元" width="120" :resizable='false'></el-table-column>
                                    <el-table-column prop="no_pirce" label="未发还需金额/元" width="120" :resizable='false'></el-table-column>
                                    <el-table-column prop="year" label="年份" width="75" :resizable='false'></el-table-column>
                                    <el-table-column prop="season" label="季节" width="75" :resizable='false'></el-table-column>
                                    <el-table-column prop="cate_1" label="大类" width="50" :resizable='false'></el-table-column>
                                    <el-table-column prop="cate_2" label="中类" width="75" :resizable='false'></el-table-column>
                                    <el-table-column prop="cate_3" label="小类" width="100" :resizable='false'></el-table-column>
                                </el-table>
                                <div class="pagination-box">
                                    <el-pagination @size-change="handleSizeChange1" :page-sizes="[10,50,100,200]" :page-size="10" @current-change="changePageSkip1" :current-page.sync="currentPage1" :total="total1" layout="sizes,prev, pager, next" background></el-pagination>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </div>
            </div>
        </div>
        <!-- /主体-->
    </div>
    <script>

        new Vue({
            el: '#shopInfos',
            data:{
                sizeGr:[],//尺码信息

                activeName2: 'first',
                company_id:'',//公司
//                getDatas:'', //起止时间
//                created_at:'', //起止时间存储变量

                girardDetails:[], //执行情况
                total1:1,  //table总条数
                page1:10,//每页多少条
                currentPage1:1, //table当前页数
                girardNum1:'',//款号种类合计

                options1: [], //公司
            },
            mounted(){
                this.common();
                this.baseInfo();
                this.grabble1();
            },
            methods:{
                /*尺码数据*/
                common(){
                    var that=this;
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                        },
                        type: 'post',
                        url: '/distribution/sizeGroupHead',
                        data: {
                            type:1,
                        },
                        success: function (data) {
                            //console.log(data);
                            if(data.result.success){
                                that.sizeGr=data.content.vertical;
                            }else{
                                that.$notify.error({
                                    title: '提示',
                                    message: data.result.errorMsg,
                                });
                            }
                        }
                    });
                },
                /*基本信息*/
                baseInfo(){
                    var that=this;
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                        },
                        type: 'post',
                        url: '/distribution/analysis-infos',
                        data: {
                            company:-1,
                        },
                        success: function (data) {
                            //console.log(data);
                            if(data.result.success){
                                that.company_id=data.content.company_id;
                                that.options1 = data.content.data;
                            }else{
                                that.$notify.error({
                                    title: '提示',
                                    message: data.result.errorMsg,
                                });
                            }
                        }
                    });
                },
                /*时间*/
//                getTime(date){
//                    if(date==null){
//                        this.getDatas='';
//                        this.created_at ='';
//                    }else{
//                        this.getDatas=date;
//                        this.created_at =date[0]+' - '+date[1];
//                    }
//                },
                /*重置*/
                resetSou(){
                    this.company_id=1;
                    this.grabble1('reset');
                },
//-----------------------------------
                /*执行情况列表*/
                grabble1(type){
                    var that = this;
                    let skip;
                    if(type == 'reset'){
                        skip = 0;
                    }else{
                        skip = that.currentPage1-1;
                    }
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                        },
                        type: 'post',
                        url: '/order-inquire/order-exec-status',
                        data: {
                            skip:skip,
                            page:that.page1,
                            company_id:that.company_id,
                        },
                        success: function (data) {
                            //console.log(data);
                            if(data.result.success){
                                var opt=[];
                                let girardArr=[];
                                let i = 0;
                                for(var value of data.content.data){
                                    if(girardArr.indexOf(value.girard)==-1){
                                        girardArr.push(value.girard)
                                    };
                                    i++;
                                    opt.push({
                                        'loop':i+(Number(that.page1)*skip),
                                        'client_name':value.client_name,
                                        'girard':value.girard,
                                        'price':value.price,
                                        'user_rate':Number( value.user_rate ).toFixed(2),
                                        'discount_price':value.discount_price,
                                        'color':value.color,
                                        'size':value.size,
                                        'nums':value.nums,
                                        'send_nums':value.send_nums,
                                        'kai_nums':value.kai_nums,
                                        'old_send':Number(value.nums)-Number(value.send_nums),
                                        'old_kai':Number(value.nums)-Number(value.kai_nums),
                                        'order_price':value.order_price,
                                        'no_pirce':(Number(value.order_price)-Number(value.send_price)).toFixed(2),
                                        'year':value.year,
                                        'season':value.season,
                                        'cate_1':value.cate_1,
                                        'cate_2':value.cate_2,
                                        'cate_3':value.cate_3,
                                    })
                                }
                                that.girardNum1=girardArr.length;
                                that.girardDetails = opt;
                                that.currentPage1 = data.content.skip;
                                that.total1 = data.content.total;
                            }else{
                                that.$notify({
                                    title: '提示',
                                    message: data.result.errorMsg,
                                    duration: 0
                                });
                            }
                        }
                    });
                },
                /*执行情况重置*/
                reset1(){
                    this.grabble1('reset');
                },
                /*执行情况每页条数*/
                handleSizeChange1(val) {
                    this.page1=val;
                    this.grabble1('reset');
                    //console.log(`每页 ${val} 条`);
                },
                /*执行情况分页*/
                changePageSkip1(val){
                    //console.log(val);
                    this.currentPage1 = val;
                    this.grabble1();
                },
                /*执行情况合计*/
                getSummaries1(param) {
                    var that=this;
                    const { columns, data } = param;
                    const sums = [];
                    columns.forEach((column, index) => {
                        if (index === 0) {
                            sums[index] = '合计';
                            return;
                        }
                        const values = data.map(item => Number(item[column.property]));
                        switch (column.property) {
                            case 'girard':
                                sums[index] = that.girardNum1;
                                break;
                            case 'nums':
                                sums[index] = values.reduce((prev, curr) => {
                                    const value = Number(curr);
                                    if (!isNaN(value)) {
                                        return prev + curr;
                                    } else {
                                        return prev;
                                    }
                                }, 0);
                                break;
                            case 'send_nums':
                                sums[index] = values.reduce((prev, curr) => {
                                    const value = Number(curr);
                                    if (!isNaN(value)) {
                                        return prev + curr;
                                    } else {
                                        return prev;
                                    }
                                }, 0);
                                break;
                            case 'kai_nums':
                                sums[index] = values.reduce((prev, curr) => {
                                    const value = Number(curr);
                                    if (!isNaN(value)) {
                                        return prev + curr;
                                    } else {
                                        return prev;
                                    }
                                }, 0);
                                break;
                            case 'old_send':
                                sums[index] = values.reduce((prev, curr) => {
                                    const value = Number(curr);
                                    if (!isNaN(value)) {
                                        return prev + curr;
                                    } else {
                                        return prev;
                                    }
                                }, 0);
                                break;
                            case 'old_kai':
                                sums[index] = values.reduce((prev, curr) => {
                                    const value = Number(curr);
                                    if (!isNaN(value)) {
                                        return prev + curr;
                                    } else {
                                        return prev;
                                    }
                                }, 0);
                                break;
                            case 'order_price':
                                sums[index] = values.reduce((prev, curr) => {
                                    const value = Number(curr);
                                    if (!isNaN(value)) {
                                        return ( parseFloat(prev) + parseFloat(curr) ).toFixed(2);
                                    } else {
                                        return parseFloat(prev).toFixed(2);
                                    }
                                }, 0);
                                break;
                            case 'no_pirce':
                                sums[index] = values.reduce((prev, curr) => {
                                    const value = Number(curr);
                                    if (!isNaN(value)) {
                                        return ( parseFloat(prev) + parseFloat(curr) ).toFixed(2);
                                    } else {
                                        return parseFloat(prev).toFixed(2);
                                    }
                                }, 0);
                                break;
                            default:
                                break;
                        }
                    });
                    return sums
                },
            },
        });
    </script>
@endsection
